<template>
	<view>
		<view class="p-20">
			<view class="p-b-10">
				<text class="cred  f-15">程序里都是演示图标请自行更换;</text>
				<text class="m-l-10 cred">https://www.iconfont.cn/</text>
				<text class="m-l-10 cred">图标库;尊重原创版权可以付款购买图标哦(一般2元一个)</text>
			</view>
			<view class="p-b-10 cred  f-15">
				保存成功后前台需刷新2次才生效
			</view>
			<view class="banmi_flex j-c" style="width: 400px;position: fixed;bottom: 100px;z-index: 88;">
				<view class=" banmi_flex a-c j-c  b_y cff" @click="on_initialization()" type="primary"
					style="width: 400px;height: 50px;background-color: #ccc;" size="mini">恢复初始化(成功后请保存)</view>
			</view>
			<view class="banmi_flex j-c" style="width: 400px;position: fixed;bottom: 30px;z-index: 88;">
				<view class=" banmi_flex a-c j-c  b_y cff" @click="on_users_cx()" type="primary"
					style="width: 400px;height: 50px;background-color: #007AFF;" size="mini">保存</view>
			</view>
			<view class="banmi_flex">
				<view class=" " style="width: 300px;background-color: #fff;height: 500px;">
					<view class="banmi_flex j-b" style="padding-top: 425px;margin: 0 20px;">
						<view class="t-c" v-for="(vo,index) in tabbar_list">
							<text class="f-14" :style="'color: ' + text_color  ">{{vo.text}}</text>
							<view class="p-t-10">
								<image style="width: 30px;height: 30px;" :src="vo.iconPath|getImg"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="m-l-10 bg-white">
					<view class="p-20">
						<view class="banmi_flex a-c  p-b-20" v-for="(vo,index) in tabbar_list">
							<view style="width: 300px;">
								<uni-easyinput v-model="vo.text">
								</uni-easyinput>
								<view style="width: 300px;margin-top: 10px;">
									<uni-easyinput v-model="vo.pagePath">
									</uni-easyinput>
								</view>
							</view>

							<view class="m-l-10">
								<image style="width: 40px;height: 40px;" :src="vo.iconPath|getImg"></image>
							</view>
							<view class="m-l-10">
								<view class="m-l-10">
									<text class="f-14">未中的图标</text>
								</view>
								<button @click="on_img(0,index)" type="primary" size="mini">更换图标</button>
							</view>
							<view class="m-l-10">
								<image style="width: 40px;height: 40px;" :src="vo.selectedIconPath|getImg"></image>
							</view>
							<view class="m-l-10">
								<view class="m-l-10">
									<text class="f-14">选中的图标</text>
								</view>
								<button @click="on_img(1,index)" type="primary" size="mini">更换图标</button>
							</view>
						</view>

					</view>

					<view class="banmi_flex a-c  p-b-10">
						<view class="banmi_flex a-c">
							<view class="p-20">
								<view @click="open_color(0)" class="color_w"
									:style="'background-color: ' + text_color  ">
								</view>
							</view>
							<text class="f-14 m-l-10">未选中颜色</text>
							<button @click="open_color(0)" type="primary" class="m-l-10" size="mini">选择颜色</button>
						</view>
					</view>
					<view class="banmi_flex a-c  p-b-10">
						<view class="banmi_flex a-c">
							<view class="p-20">
								<view @click="open_color(1)" class="color_w"
									:style="'background-color: ' + selected_color  ">
								</view>
							</view>
							<text class="f-14 m-l-10">选中的颜色</text>
							<button @click="open_color(1)" type="primary" class="m-l-10" size="mini">选择颜色</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;">

		</view>
		<uni-popup ref="alertDialog_image" type="dialog">
			<uni-popup-image :imgList="imgList.length" :count="1" t_type="images" t_name="图片" @confirm="confirm">
			</uni-popup-image>
		</uni-popup>
		<!-- 	颜色选择器 -->
		<t-color-picker ref="colorPicker" @confirm="confirm_color"></t-color-picker>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				my_list1: [],
				my_list2: [],
				token: '',
				t_type: 'image',
				imgList: [],
				selected_color: "#FF1493",
				text_color: '#333',
				color: {
					r: 255,
					g: 0,
					b: 0,
					a: 0.6
				},

				tabbar_list: []

			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			on_initialization() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认要恢复初始化吗？',
					success: function(res) {
						if (res.confirm) {
							that.ajax_initialization()
						}
					}
				});
			},
			ajax_initialization() {
				var that = this;
				let requestParams = {

				};
				this.Http.post('luyouzujiditu/admin/Settings/initialization_tabbar', requestParams).then(ret => {
					uni.showToast({
						title: ret.msg,
						icon: 'none'
					})
					var list = ret.data.set_find.plugin_tabbar;
					this.tabbar_list = list;
					this.text_color = this.tabbar_list[0]['color'];
					this.selected_color = this.tabbar_list[0]['selected_color'];
				})
			},
			open_color(item) {
				// 打开颜色选择器
				this.color_index = item
				this.$refs.colorPicker.open();

			},

			confirm_color(e) {
				if (this.color_index == 0) {
					this.text_color = e.hex
					for (var i = 0; i < this.tabbar_list.length; i++) {
						this.tabbar_list[i]['color'] = this.text_color
					}

				} else {
					this.selected_color = e.hex
					for (var i = 0; i < this.tabbar_list.length; i++) {
						this.tabbar_list[i]['selected_color'] = this.selected_color
					}
				}

			},
			on_img(id, index) {
				this.index = index;
				this.id = id;
				this.$refs.alertDialog_image.open()
			},

			confirm(img) {
				var that = this;
				if (this.id == 0) {
					that.tabbar_list[that.index]['iconPath'] = uni.getStorageSync('img_url') + img[0]['attachment'];
				} else {
					that.tabbar_list[that.index]['selectedIconPath'] = uni.getStorageSync('img_url') + img[0][
						'attachment'
					];
				}
			},
			init() {
				var that = this;
				let requestParams = {};
				this.Http.post('luyouzujiditu/admin/Settings/index', requestParams).then(ret => {
					var list = ret.data.set_find.plugin_tabbar;
					this.tabbar_list = list;
					this.text_color = this.tabbar_list[0]['color'];
					this.selected_color = this.tabbar_list[0]['selected_color'];
				})
			},
			on_users_cx() {
				var that = this;
				let requestParams = {
					plugin_tabbar: JSON.stringify(this.tabbar_list),
				};
				this.Http.post('luyouzujiditu/admin/Settings/save_tabbar', requestParams).then(ret => {
					uni.showToast({
						title: ret.msg,
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style>
	.color_w {
		width: 25px;
		height: 25px;
	}
</style>